﻿@page "/sparkline/axis-types"
@using Syncfusion.Blazor.Charts

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the various types of axis value types available in the sparkline. We have three types of an axis.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see the sparklines with various axis value types such as <b>Date-Time, Category</b> and <b>Numeric</b>. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over the data points or tap on a data point in touch-enabled devices.</p>
    <p>More information about sparkline can be found in this<a target='_blank' href='https://ej2.syncfusion.com/blazor/documentation/sparkline/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div id="spark-container" class="row">
        <div class="cols-sample-area" align="center">
            <table style="width:80%;">
                <tr>
                    <td align="center">
                        <div><b>Mean working hours for a month</b></div>
                        <div><b><i>(DateTime axis)</i></b></div>
                    </td>
                    <td style="padding: 10px;" align="center">
                        <div id="datetime" style="width:170px; height:100px">
                            <SfSparkline XName="xDate" YName="yval" TValue="SparkDataSource" DataSource="@DateTimeData"
                                         ValueType="SparklineValueType.DateTime"
                                         Type="@Syncfusion.Blazor.Charts.SparklineType.Column"
                                         LineWidth="1" Height="100px" Width="170px" Fill="#3C78EF">
                                <SparklineTooltipSettings TValue="SparkDataSource" Visible="true" Format="${xDate}: ${yval}hrs">
                                </SparklineTooltipSettings>
                            </SfSparkline>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div><b>Percentage of the students in a class</b></div>
                        <div><b><i>(Category axis)</i></b></div>
                    </td>
                    <td style="padding: 10px;" align="center">
                        <div id="category" style="width:170px; height:100px">
                            <SfSparkline XName="xval" YName="yval" TValue="SparkData" DataSource="@CategoryData"
                                         ValueType="SparklineValueType.Category"
                                         Type="@Syncfusion.Blazor.Charts.SparklineType.Column"
                                         LineWidth="1" Height="100px" Width="170px" Fill="#3C78EF">
                                <SparklineTooltipSettings TValue="SparkData" Visible="true" Format="${xval}: ${yval}%">
                                </SparklineTooltipSettings>
                            </SfSparkline>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div><b>Expenditure details of various trips</b></div>
                        <div><b><i>(Numeric axis)</i></b></div>
                    </td>
                    <td style="padding: 10px;" align="center">
                        <div id="numeric" style="width:170px; height:100px">
                            <SfSparkline XName="x" YName="yval" TValue="SparkNumericData" DataSource="@NumericData"
                                         ValueType="SparklineValueType.Numeric"
                                         Type="@Syncfusion.Blazor.Charts.SparklineType.Column"
                                         LineWidth="1" Height="100px" Width="170px" Fill="#3C78EF">
                                <SparklineTooltipSettings TValue="SparkNumericData" Visible="true" Format="${x}: $${yval}">
                                </SparklineTooltipSettings>
                            </SfSparkline>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>


@code {
    public class SparkDataSource
    {
        public double x { get; set; }
        public DateTime xDate { get; set; }
        public double yval { get; set; }
    };
    public class SparkData
    {
        public Double x { get; set; }
        public String xval { get; set; }
        public Double yval { get; set; }
    };
    public class SparkNumericData
    {
        public Double x { get; set; }
        public Double xval { get; set; }
        public Double yval { get; set; }
    };
    public List<SparkDataSource> DateTimeData = new List<SparkDataSource>
{
        new SparkDataSource { xDate= new DateTime(2018, 1, 1), x= 0, yval= 4 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 2), x= 1, yval= 4.5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 3), x= 2, yval= 8 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 4), x= 3, yval= 7 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 5), x= 4, yval= 6 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 8), x= 5, yval= 8 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 9), x= 6, yval= 8 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 10), x= 7, yval= 6.5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 11), x= 8, yval= 4 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 12), x= 9, yval= 5.5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 15), x= 10, yval= 8 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 16), x= 11, yval= 6 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 17), x= 12, yval= 6.5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 18), x= 13, yval= 7.5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 19), x= 14, yval= 7.5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 22), x= 15, yval= 4 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 23), x= 16, yval= 8 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 24), x= 17, yval= 6 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 25), x= 18, yval= 7.5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 26), x= 19, yval= 4.5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 29), x= 20, yval= 6 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 30), x= 21, yval= 5 },
        new SparkDataSource { xDate= new DateTime(2018, 1, 31), x= 22, yval= 7 }
    };


    public List<SparkData> CategoryData = new List<SparkData>
{
        new SparkData { x= 0, xval= "Robert", yval= 60 },
        new SparkData { x= 1, xval= "Andrew", yval= 65 },
        new SparkData { x= 2, xval= "Suyama", yval= 70 },
        new SparkData { x= 3, xval= "Michael", yval= 80 },
        new SparkData { x= 4, xval= "Janet", yval= 55 },
        new SparkData { x= 5, xval= "Davolio", yval= 90 },
        new SparkData { x= 6, xval= "Fuller", yval= 75 },
        new SparkData { x= 7, xval= "Nancy", yval= 85 },
        new SparkData { x= 8, xval= "Margaret", yval= 77 },
        new SparkData { x= 9, xval= "Steven", yval= 68 },
        new SparkData { x= 10, xval= "Laura", yval= 96 },
        new SparkData { x= 11, xval= "Elizabeth", yval= 57 }
    };


    public List<SparkNumericData> NumericData = new List<SparkNumericData>
    {
        new SparkNumericData { x= 1, xval= 2010, yval= 190 },
        new SparkNumericData { x= 2, xval= 2011, yval= 165 },
        new SparkNumericData { x= 3, xval= 2012, yval= 158 },
        new SparkNumericData { x= 4, xval= 2013, yval= 175 },
        new SparkNumericData { x= 5, xval= 2014, yval= 200 },
        new SparkNumericData { x= 6, xval= 2015, yval= 180 },
        new SparkNumericData { x= 7, xval= 2016, yval= 210 }
    };
}

<style>
    td {
        font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
        font-size: 14px;
        font-weight: 500;
    }
</style>